/**
 * Created by luchengdong on 2017/8/29.
 */
function $(id) {
    return typeof id === 'string' ? document.getElementById(id) : id;
}

window.onload = function () {
    // 瀑布流布局
    waterFall('back', 'border_view');

    // 滚动加载盒子
    window.onscroll = function () {
        if (cheakWillLoad('back', 'border_view')) {
            var data = {'dataImg': [{'img': '28.jpg'}, {'img': '27.jpg'}, {'img': '26.jpg'}, {'img': '25.jpg'}, {'img': '24.jpg'}, {'img': '23.jpg'}, {'img': '22.jpg'}, {'img': '21.jpg'}, {'img': '11.jpg'}, {'img': '12.jpg'}, {'img': '13.jpg'}, {'img': '14.jpg'}, {'img': '15.jpg'}, ]}

            for (var i = 0; i < data.dataImg.length; i++) {
                var image_name = data.dataImg[i].img;

                var border_view = document.createElement('div');
                border_view.className = 'border_view';
                $('back').appendChild(border_view);

                var image_view = document.createElement('div');
                image_view.className = 'imageView';
                border_view.appendChild(image_view);

                var img = document.createElement('img');
                img.src = 'imgs/' + image_name;
                image_view.appendChild(img);
            }

            waterFall('back', 'border_view');
        }
    }
}

function waterFall(outer_id, cell_class) {
    var border_view_list = $(outer_id).getElementsByClassName(cell_class);

    var screen_width = document.body.clientWidth;
    console.log('screen_width:' + screen_width);
    var cell_width = border_view_list[0].offsetWidth;
    var columns = Math.floor(screen_width/cell_width);

    $(outer_id).style.width = columns * cell_width + 'px';
    $(outer_id).style.margin = '0 auto';

    var height_list = [];

    for (var i = 0; i < border_view_list.length; i++) {
        var border_view = border_view_list[i];
        var cell_height = border_view.offsetHeight;
        if (i < columns) {
            height_list.push(cell_height);
        } else {
            var min_height = Math.min.apply(this, height_list);
            var minIndex = getMinIndexInArray(min_height, height_list);

            console.log(min_height, minIndex * cell_width);

            border_view_list[i].style.position = 'absolute';
            border_view_list[i].style.top = min_height + 'px';
            border_view_list[i].style.left = minIndex * cell_width + 'px';

            height_list[minIndex] = height_list[minIndex] + cell_height;
        }
    }
    console.log(height_list);
}

function getMinIndexInArray(minHeight, height_list) {
    var index = -1;
    for (var i = 0; i < height_list.length; i++) {
        if (minHeight == height_list[i]) {
            index = i;
            break;
        }
    }
    return index;
}

function cheakWillLoad(outer_id, cell_class) {
    // 取出所有的border_view
    var border_view_list = $(outer_id).getElementsByClassName(cell_class);

    // 取出最后一个border_view
    var last_border_view = border_view_list[border_view_list.length - 1];

    // 求出最后一个盒子高度的一般 + 头部偏离值
    var last_border_view_dis = last_border_view.offsetHeight * 0.5 + last_border_view.offsetTop;

    // 求出浏览器的高度 标准模式和混杂模式
    var screen_height = document.body.clientWidth || document.documentElement.clientWidth;

    // 页面偏离屏幕的高度
    var scrool_top_height = document.body.scrollTop;

    return last_border_view_dis <= screen_height + scrool_top_height;
}